*{
    margin: 0;
    padding: 0;
    user-select: none;
}
body{
    background-color: #F4F4F4;
}
.box{
    width: 990px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    .item{
        position: relative;
        cursor: pointer;
        background-color: white;
        width: 190px;
        height: 266px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        box-sizing: border-box;
        padding: 20px 10px;
        margin: 0 10px 10px 0;
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
        .item-img{
            width: 120px;
            height: 120px;
        }
        .item-title{
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .item-footer{
            width: 100%;
            display: flex;
            justify-content: space-between;
            .red{
                color: red;
            }
        }
        &:hover{
            &::after{
                position: absolute;
                content: "";
                z-index: 100;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                background-color: rgba($color: #ffffff, $alpha: 0.1);
            }
        }
    }
    >div{
        &:nth-child(5n){
            margin-right: 0;
        }
    }
}
// .box{
//     width: 1190px;
//     height: 60px;
//     margin: 0 auto;
//     display: flex;
//     .item{
//         cursor: pointer;
//         flex-grow: 1;
//         color: black;
//         padding: 0 5px;
//         display: flex;
//         flex-direction: column;
//         justify-content: center;
//         align-items: center;
//         >div{
//             text-align: center;
//             width: 80px;
//             &:nth-child(1){
//                 font-weight: bold;
//                 height: 24px;
//                 padding: 4px 5px;
//                 border-radius: 16px;
//             }
//             &:nth-child(2){
//                 color: #ccc;
//             }
//         }
//         &:hover{
//             >div{
//                 &:nth-child(1){
//                     color: #c81623;
//                 }
//                 &:nth-child(2){
//                     color: #c81623;
//                 }
//             }
//         }
//     }
//     .active{
//         >div{
//             &:nth-child(1){
//                 color: #fff !important;
//                 background-color: red;
//             }
//             &:nth-child(2){
//                 color: red;
//             }
//         }
//     }
// }